<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wallpaper</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    #wallpaper {
      width: 100vw;
      height: 100vh;
      background-color: #233338;
      background-position: center center;
      position: relative;
      overflow: hidden;
    }
    #taskbar {
      position: absolute;
      background: inherit;
      overflow: hidden;
    }
    #taskbar-bg{
      content: "";
      width: 100vw;
      height: 100vh;
      position: absolute;
      background: inherit;
      z-index: 2;
    }
    #change-wall-paper {
      position: absolute;
      right: 0;
      top: 0;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      border: 6px solid rgba(255, 196, 0, 0.2);
      outline: none;
      background-color: rgba(255, 196, 0, 0.6);
      background-clip: padding-box;
      cursor: pointer;
      z-index: 10;
    }
  </style>
</head>
<body>
  <button id="change-wall-paper"></button>
  <div id="wallpaper">
    <div id="taskbar">
      <div id="taskbar-bg"></div>
    </div>
  </div>
  <img src="http://hits.dwyl.com/dmscode/simple-tool-pages/Wallpaper.svg" alt="" style="display: none;">
  <script>
    const getQuerys = new Object;
    window.location.search.split(/[\?&]/g).forEach(get=>{
      if(/=/.test(get)){
        const getArr = get.split(/=/)
        getQuerys[getArr[0]] = decodeURIComponent(getArr[1])
      }
    })
    const blurWidth = isNaN(+getQuerys['blur']) ? 0 : +getQuerys['blur']  // 任务栏背景模糊半径
    const taskbarSide = getQuerys['taskbarside']  // 任务栏方向
    const taskbarHeight = isNaN(+getQuerys['taskbarheight']) ? 0 : +getQuerys['taskbarheight']  // 任务栏高度

    const wpEl = document.getElementById('wallpaper')
    const taskbar = document.getElementById('taskbar')
    const taskbarBG = document.getElementById('taskbar-bg')
    const changeButton = document.getElementById('change-wall-paper')

    const widthStyle = 'calc(100vw + '+blurWidth*2+'px)'
    const heightStyle = 'calc(100vh + '+blurWidth*2+'px)'
    const marginStyle = '-'+blurWidth+'px'

    wpEl.style.width = widthStyle
    wpEl.style.height = heightStyle
    wpEl.style.margin = marginStyle
    taskbarBG.style.width = widthStyle
    taskbarBG.style.height = heightStyle
    taskbarBG.style.filter = 'blur('+blurWidth+'px)'

    switch (taskbarSide) {
      case 'bottom':
        taskbar.style.width = widthStyle
        taskbar.style.height = taskbarHeight+'px'
        taskbar.style.left = 0
        taskbar.style.bottom = blurWidth+'px'
        taskbar.style.boxShadow = '0 -20px 15px -13px rgba(0, 0, 0, 0.1)'
        taskbarBG.style.left = 0
        taskbarBG.style.bottom = marginStyle
        break;
      case 'left':
        taskbar.style.width = taskbarHeight+'px'
        taskbar.style.height = heightStyle
        taskbar.style.left = blurWidth+'px'
        taskbar.style.top = 0
        taskbar.style.boxShadow = '20px 0 15px -13px rgba(0, 0, 0, 0.1)'
        taskbarBG.style.left = marginStyle
        taskbarBG.style.top = 0
        break;
      case 'top':
        taskbar.style.width = widthStyle
        taskbar.style.height = taskbarHeight+'px'
        taskbar.style.left = 0
        taskbar.style.top = blurWidth+'px'
        taskbar.style.boxShadow = '0 20px 15px -13px rgba(0, 0, 0, 0.1)'
        taskbarBG.style.left = 0
        taskbarBG.style.top = marginStyle
        changeButton.style.top = taskbarHeight+'px'
        break;
      case 'right':
        taskbar.style.width = taskbarHeight+'px'
        taskbar.style.height = heightStyle
        taskbar.style.right = blurWidth+'px'
        taskbar.style.top = 0
        taskbar.style.boxShadow = '-20px 0 15px -13px rgba(0, 0, 0, 0.1)'
        taskbarBG.style.right = marginStyle
        taskbarBG.style.top = 0
        changeButton.style.right = taskbarHeight+'px'
        break;
      default:
        taskbar.style.display = 'none'
        break;
    }

    let timerHandler  // 计时器句柄
    let counter = 0 // 刷新计数器
    const changeWallPaper = function(){
      const wpWidth  = wpEl.offsetWidth + blurWidth*2 + Math.floor(counter/100)
      const wpHeight = wpEl.offsetHeight + blurWidth*2 + counter%100
      const imgUrl = 'https://source.unsplash.com/random/'+wpWidth+'x'+wpHeight
      wpEl.dataset.counter = counter
      const tempImg = new Image()
      if(+wpEl.dataset.counter !== counter) return
      changeButton.style.border = '6px solid rgba(255, 196, 0, 0.2)'
      changeButton.style.backgroundColor = 'rgba(255, 196, 0, 0.6)'
      tempImg.onload = function() {
        wpEl.style.backgroundImage = 'url("'+imgUrl+'")'
        changeButton.style.border = '6px solid rgba(23, 196, 0, 0.1)'
        changeButton.style.backgroundColor = 'rgba(23, 196, 0, 0.2)'
      }
      tempImg.src = imgUrl;
      counter++
      window.clearTimeout(timerHandler)
      timerHandler = window.setTimeout( changeWallPaper, 9e5)
    }
    window.onload=function(){
      changeWallPaper()
      changeButton.onclick = changeWallPaper
    }
  </script>
</body>
</html>